<template>
    <el-select v-model="selectedAppId" size="small" v-loading="dataListLoading" placeholder="请选择微信账号"  @change="selectAccount" filterable>
        <el-option v-for="item in accountList" :key="item.appId" :label="item.name+'（'+ACCOUNT_TYPES[item.type]+'）'" :value="item.appId"></el-option>
    </el-select>
</template>
<script>
import { mapState } from 'vuex'
export default {
    name:"wxAccountSelector",
    data() {
        return {
            dataListLoading: false
        }
    },
    computed: mapState({
        accountList: state=>state.wxAccount.accountList,
        ACCOUNT_TYPES: state=>state.wxAccount.ACCOUNT_TYPES,
        selectedAppId:state=>state.wxAccount.selectedAppId
    }),
    mounted(){
        this.getDataList()
    },
    methods:{
        async getDataList() {
            this.dataListLoading = true
            let res = await this.$API.wechat.wechatAccount.getSelectItem.get();
            if(res.success){
              this.$store.commit('wxAccount/updateAccountList', res.data)
              if(!res.data.length){
                this.$message.info("公众号列表为空，请先添加")
              }
            }
            this.dataListLoading = false;
        },
        selectAccount(appId){
            if(this.selectedAppId != appId){
                this.$store.commit('wxAccount/selectAccount', appId)
            }
        }
    }
}
</script>